<template>
  <!--自定义查询区域-->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="140px">
          <a-form-item label="部门" :label-col="{ style: { width: '45px' } }" :wrapper-col="{ span: 17 }">
            <JDictSelectTag
              v-model:value="queryParam.ddlxIds"
              mode="multiple"
              dictCode="ddlxType@ddlxUser"
              placeholder="全部"
              :maxTagCount="0"
              :getPopupContainer="(node) => node.parentNode"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="380px">
          <a-form-item label="" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '260px' } }">
            <a-select v-model:value="queryParam.sdate" default-value="0" id="today" style="width: 100px; margin-right: 5px" @change="todayChange" >
              <a-select-option value="0">记账日期</a-select-option>
              <a-select-option value="1">出团日期</a-select-option>
            </a-select>
            <a-date-picker
              v-model:value="queryParam.beginDate"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 123px"
            /> ~
            <a-date-picker
              v-model:value="queryParam.endDate"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 123px"
            />
          </a-form-item>
        </a-col>

        <a-col flex="230px">
          <a-form-item label="账户名称" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ span: 17 }">
            <a-input placeholder="" v-model:value="queryParam.areaName"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:150px; ">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
            <a-button type="default" @click="searchReset" preIcon="ant-design:reload-outlined" style="margin-left: 8px">重置</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :indentSize="8" :loading="loading">
    <template #bankname="{ text, record }">
    <span style="position: relative; left: -9px">
      <span v-if="record.type == '1'" style="display: inline-flex; position: relative; top: 3px; height: 21px">
        <svg class="icon svg-icon bank-icon" v-if="record.logo">
          <use :xlink:href="'#icon-' + record.logo"></use>
        </svg>
        <Image width="15px" src="../logo2.png" style="" v-else></Image>
      </span>
      <span style="display: inline-flex; ">{{ text }}</span>
    </span>
    </template>
  </BasicTable>
  <!-- table区域-end -->

</template>

<script lang="ts" setup name="report-accountBankRunning">
import { nextTick, reactive, ref } from "vue";
import { BasicTable, BasicColumn } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import { defHttp } from "/@/utils/http/axios";
import { filterObj } from "/@/utils/common/compUtils";
import { Image } from 'ant-design-vue';

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive<any>({
  ddlxIds: [],
  sdate: "0", //未审
  beginDate : "",
  endDate: "",
});

const resetParam = { ...queryParam }

//限制查询日期，开始日期不能大于结束日期
function disabledStartDate(beginDate) {
  const endDate = queryParam.endDate;
  if (!beginDate || !endDate) {
    return false;
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.beginDate;
  if (!endDate || !beginDate) {
    return false;
  }
  return moment(beginDate).valueOf() > endDate.valueOf();
}

//初始化 -------------------------------------------------------------
const columns: BasicColumn[] = [
  { dataIndex: "name", title: "银行账户/部门", width: 209, align: "left", slots: { customRender: 'bankname' }  },
  { dataIndex: "yssrje", title: "业务收入", width: 109, align: "right" },
  { dataIndex: "yszcje", title: "业务支出", width: 109, align: "right" },
  { dataIndex: "ywye", title: "业务金额", width: 109, align: "right", className: "text-purple-500" },
  { dataIndex: "hzsrje", title: "划转收入", width: 109, align: "right" },
  { dataIndex: "hzzcje", title: "划转支出", width: 109, align: "right" },
  { dataIndex: "hzye", title: "划转金额", width: 109, align: "right", className: "text-pink-500" },
  { dataIndex: "ysye", title: "已审余额", width: 109, align: "right", className: "text-green-500" },
  { dataIndex: "wsye", title: "未审余额", width: 109, align: "right", className: "text-blue-500" },
  { dataIndex: "lsye", title: "流水余额", width: 109, align: "right", className: "text-red-500" }
];

// 列表页面公共参数、方法
const loading = ref<boolean>(false);
const dataSource = ref<any[]>([]);
const summaryData = ref<any[]>([]);
const { prefixCls, tableContext } = useListPage({
  tableProps: {
    rowKey: "id",
    dataSource: dataSource,
    columns: columns,
    size: "small",
    pagination: false,
    isTreeTable: true,
    striped: true,
    useSearchForm: false,
    bordered: true,
    showTableSetting: false,
    showActionColumn: false,
    showSummary: true,
    resizeHeightOffset:40,
    summaryData: summaryData,
    onExpand: onExpand
  }
});

function todayChange() {
  if (queryParam.today == '1') {
    queryParam.shbj = '1'
  } else {
    queryParam.shbj = '0'
  }
}

//注册table数据
const [registerTable, { reload, collapseAll }] = tableContext;
const url = "/report/accountBankRunning";
async function loadData(params) {
  loading.value = true;
  let result = await defHttp.get({ url, params, timeout: 60000 });
  loading.value = false;
  return result;
}

/** 点击展开图标时触发 */
async function onExpand(isExpand, rowData) {
  if (isExpand && rowData.hasChildren === "true" && rowData.children.length === 0) {
    let params = {...queryParam, parent_id: rowData.id, type: rowData.type }
    const res = await loadData(filterObj(params));
    rowData.children = res.rows;
  }
}

async function loadRootData() {
  const res = await loadData(filterObj(queryParam));
  if (res) {
    dataSource.value = res.rows;
    summaryData.value = res.footer;
  } else {
    dataSource.value = [];
    summaryData.value = [];
  }
}

function searchQuery() {
  //reload();
  loadRootData();
  nextTick(collapseAll);
}

function searchReset() {
  Object.assign(queryParam, resetParam);
  loadRootData();
}

//默认执行查询
searchQuery();

</script>
<style scoped>
.ant-row1 > div:not(.gutter-row):nth-child(2n + 1) {
  background: rgba(0, 146, 255, .75);
}

.ant-row1 > div:not(.gutter-row) {
  padding: 16px 0;
  background: #0092ff;
}

.ant-col1 {
  position: relative;
  max-width: 100%;
  min-height: 1px;
}

/** 2022-05-30 */
.jeecg-basic-table-form-container .ant-form {
  margin: 0px;
}

.jeecg-basic-table .ant-form-item {
  margin-bottom: 5px;
}

.ant-table-tbody ::v-deep(.clickRowStyl) {
  border-color: #76B4AC!important;
  background: #eee!important;
  color: #007465!important;
}

.datagrid-row-selected {
  border-color: #76B4AC;
  background: #eee;
  color: #007465;
}

.datagrid-row-over{
  background: #F5F5F5;
  color: #444;
  cursor: default;
  font-weight: normal;
}

::v-deep(.bank-icon) {
  width: 17px;
  height: 17px;
  line-height: 17px;
  margin-right: 3px;
  margin-left: 3px;
  float: left;
  padding-top: 2px;
}

::v-deep(.ant-image) {
  width: 17px;
  height: 17px;
  float: left!important;
  margin-left: 5px;
  margin-right: 3px;
  position: relative;
  top: -5px;
}

::v-deep(.ant-image-img) {
  width: 14px;
  height: 14px;
}
</style>